import React, { Component } from "react";
import { Menu, Icon, Layout } from "antd";

import logo from "./image/logo.png";
import "./css/index.less";
const { Header, Footer, Sider, Content } = Layout;
const { SubMenu } = Menu;
export default class leftnav extends Component {
  state = {
    collapsed: false,
    collapsible:true
  };
  handleClick=(e)=>{
console.log(e,'查看对应的点击事件e')
  }
  render() {
    return (
      <div>
          {/* trigger={null} */}
        <Sider  trigger={null} collapsible={this.state.collapsible} collapsed={this.props.collapsed}>
          <div className="logo" />

          <div className="title" style={{ height: "80px" }}>
            {/* <img src="./image/logo.png" alt=""/> */}
            <img src={logo} style={{ width: "40px", height: "40px" }} />
            <h2
              style={{ color: "#fff", height: "26px",'margin-bottom': '0','overflow': 'hidden','white-space': 'nowrap' }}
              className={this.props.collapsed ? 'noneTitle':'Title' }
            >
              项目管理后台
            </h2>
          </div>
          {/* theme="light" */}
          <Menu mode="inline" defaultSelectedKeys={["4"]} onClick={this.handleClick}>
            <Menu.Item key="1">
              <Icon type="user" />
              <span>首页</span>
            </Menu.Item>
            <SubMenu
              key="sub1"
              title={
                <span>
                  <Icon type="database" />
                  <span>商品</span>
                </span>
              }
            >
              <Menu.Item key="2">
                <Icon type="container" />
                品类管理
              </Menu.Item>
              <Menu.Item key="3">
              <Icon type="appstore" />
                  商品管理
                  </Menu.Item>
            </SubMenu>
            <Menu.Item key="4">
              <Icon type="user-add" />
              <span>用户管理</span>
            </Menu.Item>
            <Menu.Item key="5">
              <Icon type="carry-out" />
              <span>角色管理</span>
            </Menu.Item>
            <SubMenu
              key="sub2"
              title={
                <span>
                  <Icon type="heat-map" />
                  <span>图形图表</span>
                </span>
              }
            >
              <Menu.Item key="6">
              <Icon type="bar-chart" />
                  柱形图表
                  
                  </Menu.Item>
              <Menu.Item key="7">
              <Icon type="line-chart" />
                  折线图
                  </Menu.Item>
              <Menu.Item key="8">
              <Icon type="pie-chart" />
                  饼图
                  </Menu.Item>
            </SubMenu>

            <Menu.Item key="9">
              <Icon type="file-text" />
              <span>订单管理</span>
            </Menu.Item>
          </Menu>
        </Sider>
      </div>
    );
  }
}
